<template lang="html">
    <div id="search">
        <div class="searchHead">
            <img src="../../assets/images/back.png" alt="" @click="back()">
            <input type="text" name="" value="" placeholder="请输入商品关键词">
            <a href="">搜索</a>
        </div>

        <div class="hot">
            <p>热门搜索：</p>
            <a href="#" v-for="word in allData" v-text="word.title"></a>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            allData: []
        }
    },
    methods: {
        back () {
            history.back();
        }
    },
    created () {
        this.$http.get('../../../static/searchSelect.json').then( data => {
            // console.log(data.data.data.bannerGroupList[0].bannerList);
            // 把请求下来的数据转移给实例的data函数中
            this.allData = data.data.data.bannerGroupList[0].bannerList;
        }, err => {
            console.log(err);
        });
    }
}
</script>

<style lang="css">
    #search{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #F7F7F7;
        text-align: center;
        font-size: 1rem;
        color: #464e55;
        border-bottom: solid 1px #EEE;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .searchHead{
        width: 100%;
        height: 2.92rem;
        background: #fff;
        padding: .42rem 0;
        border-bottom: 1px solid #F7F7F7;
    }
    .searchHead > img{
        float: left;
        width: 22px;
        height: 20px;
        margin: .67rem 0 0 .83rem;
    }
    .searchHead > input{
        float: left;
        width: 14.42rem;
        height: 2.08rem;
        margin-left: 1.7rem;
        padding: 4px 10px 4px 35px;
        border: solid 1px #DDD;
        border-radius: 30px;
        font-size: 1rem;
        font-size: 14px;
        color: #CCC;
        text-align: start;
        outline: none;
        background: url(../../assets/images/search-in.png) 10px center/ 16px 16px no-repeat;
    }
    .searchHead > a{
        float: left;
        color: #666;
        font-size: 16px;
        margin: 5px 0 0 5px;
    }
    .hot{
        margin-top: 10px;
        text-align: left;
        padding-left: 10px;
    }
    .hot p{
        font-size: 16px;
        margin-bottom: 15px;
        color: #999;
    }
    .hot a{
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        margin: 0 10px 10px 0;
        color: #666;
        font-size: 12px;
        border: solid 1px #DDD;
        border-radius: 3px;
        display: inline-block;
        float: left;
    }
</style>
